<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>商品管理</title>
    <link rel="stylesheet" href="/admin/css/categoryManage.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script type="text/javascript" src="/static/js/jquery-3.6.0.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</head>
<body>
<h2 style="text-align: center;">商品管理</h2>
<button type="button" class="col-md-2 btn btn-success btn-add"  data-toggle="modal" data-target="#myModal4" style='margin-left: 454px;'><span class="glyphicon glyphicon-plus" aria-hidden="true">添加</span></button>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel4">操作</h4>
            </div>
            <div class="modal-body">
                <%--                添加操作--%>
                <form action="/uploadGood" method="post" enctype="multipart/form-data">
                <div>id：<input type="text" name="name" id="id1" value="编号" onblur="if(this.value==''){this.value='编号'}" onfocus="if(this.value=='编号'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 60px"></div>
                <div>商品名：<input type="text" name="author" id="author" value="商品名" onblur="if(this.value==''){this.value='商品名'}" onfocus="if(this.value=='商品名'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;"></div>
                <div>制造者：<input type="text" name="publisher" id="publisher" value="制造者" onblur="if(this.value==''){this.value='制造者'}" onfocus="if(this.value=='制造者'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;"></div>
                <div>出品商：<input type="text" name="publishtime" id="publishtime" value="出品商" onblur="if(this.value==''){this.value='出品商'}" onfocus="if(this.value=='出品商'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;"></div>
                <div>描述：<input type="text" name="decription" id="decription" value="描述" onblur="if(this.value==''){this.value='描述'}" onfocus="if(this.value=='描述'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;"></div>
                <div>图片：<input type="text" name="image" id="image" value="/${imagePath}" disabled>
                   <img style='width: 170px;' src='/user/images/${imagePath}' />
                   <input type='file' name='upload'><br>
                   <input type='submit' name='sure-sure' value='确定'><br></div>
                <div>售价：<input type="text" name="salesprice" id="salesprice" value="售价" onblur="if(this.value==''){this.value='售价'}" onfocus="if(this.value=='售价'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;"></div>
                <div>上架时间：<input type="text" name="uptime" id="uptime" value="上架时间" onblur="if(this.value==''){this.value='上架时间'}" onfocus="if(this.value=='上架时间'){this.value=''}" style="border: 1px solid darkgrey;opacity: 0.5;width: 150px;"></div>
                <div>状态(1.上架)：<input type="text" name="status" id="status" value="1" onblur="if(this.value==''){this.value='1'}" onfocus="if(this.value=='1'){this.value=''}"  style="border: 1px solid darkgrey;opacity: 0.5;margin-left: 5px;width: 150px;"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <%--<button type="button" class="btn btn-primary"></button>--%>
                <input id="refer" type="submit" value="提交" class="btn btn-primary">
            </div>
        </div>
    </div>
</div>
<div>
    搜索：<input type="text" name="search" id="search">
    <input id="like-search" type="button" value="确认">
</div>
<form action="/uploadImg" method="post" enctype="multipart/form-data">
    <table class="table table-hover table-one">
    </table>
</form>
<script>
    $(function () {
        //查询输出所有商品
        $.getJSON("/goods.do", {method: "findGoodsAll1"}, function (goods) {
            //添加标头
            $(".table").html(
                "            <tr class=\"tr-title container\">\n" +
                "            <td class=\"col-md-1\">#</td>\n" +
                "            <td class=\"col-md-1\">商品名</td>\n" +
                "            <td class=\"col-md-1\">制造者</td>\n" +
                "            <td class=\"col-md-1\">出品商</td>\n" +
                "            <td class=\"col-md-1\">描述</td>\n" +
                "            <td class=\"col-md-1\">图片</td>" +
                "            <td class=\"col-md-1\">售价</td>\n" +
                "            <td class=\"col-md-1\">上架时间</td>\n" +
                "            <td class=\"col-md-1\">状态(1.正常2.无效)</td>\n" +
                "            <td class=\"col-md-3\">操作</td>\n" +
                "        </tr>");
            //添加内容
            console.log(goods);
            for (let i = 0; i < goods.length; i++) {
                let $id = $("<td class=\"col-md-1\"><input name='id' value='" + goods[i].id + "' ></td>");
                let $name = $("<td class=\"col-md-1\"><input name='name' value='" + goods[i].name + "' ></td>");
                let $author = $("<td class=\"col-md-1\"><input name='author' value='" + goods[i].author + "' ></td>");
                let $publisher = $("<td class=\"col-md-1\"><input name='publisher' value='" + goods[i].publisher + "' ></td>");
                let $decription = $("<td class=\"col-md-1\"><input name='decription' value='" + goods[i].decription + "' ></td>");
                let $img = $("<td class=\"col-md-1\"><img style='width: 170px;' src=\"/user/images" + goods[i].image + "\" name=\"image\" id=\"image\">" +
                    // "<input type=\"file\" name=\"upload\"><br><input type=\"submit\" name=\"sure-sure\" value='确定'><br>" +
                    "</td>");
                let $salesprice = $("<td class=\"col-md-1\"><input name='salesprice' value='" + goods[i].salesprice + "' ></td>");
                let $uptime = $("<td class=\"col-md-1\"><input name='uptime' value='" + goods[i].uptime + "' ></td>");
                let $status = $("<td class=\"col-md-1\"><input name='status' value='" + goods[i].staus + "' ></td>");
                let $button1 = $("<button type=\"button\" class=\"btn btn-default btn-one\"><span class=\"glyphicon glyphicon-minus\" aria-hidden=\"true\">修改</span></button>");
                let $button2 = $("<button type=\"button\" class=\"btn btn-danger btn-one\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\">移除</span></button>");
                let $btn = $("<td class=\"col-md-3\" id=" + goods[i].id + "></td>").append($button1).append($button2);
                //点击删除
                let id = $btn.attr("id");
                $button2.click(function () {
                    $.getJSON("/goods.do", {method: "delGoodsById", id: id}, function (resp) {
                        if (resp > 0) {
                            //删除元素
                            $id.parent().remove();
                            alert("删除成功！");
                        } else {
                            alert("删除失败,请稍后再试")
                        }
                    })
                })
                //展示数据
                let $tr = $("<tr class=\"container\"></tr>");
                $tr.append($id).append($name).append($author).append($publisher).append($decription).append($img).append($salesprice).append($uptime).append($status).append($btn);
                // let $form = $("<form action=\"/uploadImg\" method=\"post\"></form>")
                // $form.append($tr);
                $(".table").append($tr);
            }
            //添加
            $("#refer").click(function () {
                $.getJSON("/goods.do", {
                    method: "addGoods",
                    id: $("#id1").val(),
                    author: $("#author").val(),
                    publisher: $("#publisher").val(),
                    publishtime: $("#publishtime").val(),
                    decription: $("#decription").val(),
                    image: $("#image").val(),
                    salesprice: $("#salesprice").val(),
                    uptime: $("#uptime").val(),
                    status: $("#status").val()
                }, function (resp) {
                    if (resp > 0) {
                        console.log("====添加成功=====")
                        $("#refer").parent().parent().css("display", "none");
                        location.reload();
                    } else {
                        alert("添加失败,请稍后再试")
                    }
                })
            })
            $('#myModal').on('shown.bs.modal', function () {
                $('#myInput').focus();
            });
        })
        //模糊查询
        $("#like-search").click(function () {
            $.getJSON("/goods.do",{method:"likeSearch",name:$("#search").val()},function (goods) {
                //添加标头
                $(".table").html(
                    "            <tr class=\"tr-title container\">\n" +
                    "            <td class=\"col-md-1\">#</td>\n" +
                    "            <td class=\"col-md-1\">商品名</td>\n" +
                    "            <td class=\"col-md-1\">制造者</td>\n" +
                    "            <td class=\"col-md-1\">出品商</td>\n" +
                    "            <td class=\"col-md-1\">描述</td>\n" +
                    "            <td class=\"col-md-1\">图片</td>"+
                    "            <td class=\"col-md-1\">售价</td>\n" +
                    "            <td class=\"col-md-1\">上架时间</td>\n" +
                    "            <td class=\"col-md-1\">状态(1.正常2.无效)</td>\n" +
                    "            <td class=\"col-md-3\">操作</td>\n" +
                    "        </tr>");
                //添加内容
                console.log(goods);
                for(let i=0;i<goods.length;i++){
                    let $id =$("<td class=\"col-md-1\"><input name='id' value='"+goods[i].id+"' ></td>");
                    let $name =$("<td class=\"col-md-1\"><input name='name' value='"+goods[i].name+"' ></td>");
                    let $author =$("<td class=\"col-md-1\"><input name='author' value='"+goods[i].author+"' ></td>");
                    let $publisher =$("<td class=\"col-md-1\"><input name='publisher' value='"+goods[i].publisher+"' ></td>");
                    let $decription =$("<td class=\"col-md-1\"><input name='decription' value='"+goods[i].decription+"' ></td>");
                    let $img =$("<td class=\"col-md-1\"><img style='width: 170px;' src=\"/user/images"+goods[i].image+"\" name=\"image\" id=\"image\">" +
                        // "<input type=\"file\" name=\"upload\"><br><input type=\"submit\" name=\"sure-sure\" value='确定'><br>" +
                        "</td>");
                    let $salesprice =$("<td class=\"col-md-1\"><input name='salesprice' value='"+goods[i].salesprice+"' ></td>");
                    let $uptime =$("<td class=\"col-md-1\"><input name='uptime' value='"+goods[i].uptime+"' ></td>");
                    let $status =$("<td class=\"col-md-1\"><input name='status' value='"+goods[i].staus+"' ></td>");
                    let $button1 = $("<button type=\"button\" class=\"btn btn-default btn-one\"><span class=\"glyphicon glyphicon-minus\" aria-hidden=\"true\">修改</span></button>");
                    let $button2 = $("<button type=\"button\" class=\"btn btn-danger btn-one\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\">移除</span></button>");
                    let $btn =$("<td class=\"col-md-3\" id="+goods[i].id+"></td>").append($button1).append($button2);
                    //点击删除
                    let id = $btn.attr("id");
                    $button2.click(function () {
                        $.getJSON("/goods.do",{method:"delGoodsById",id:id},function (resp) {
                            if(resp>0){
                                //删除元素
                                $id.parent().remove();
                                alert("删除成功！");
                            }else {
                                alert("删除失败,请稍后再试")
                            }
                        })
                    })
                    //展示数据
                    let $tr = $("<tr class=\"container\"></tr>");
                    $tr.append($id).append($name).append($author).append($publisher).append($decription).append($img).append($salesprice).append($uptime).append($status).append($btn);
                    // let $form = $("<form action=\"/uploadImg\" method=\"post\"></form>")
                    // $form.append($tr);
                    $(".table").append($tr);
                }
            })
        })
    })


</script>
</body>
</html>
